<template>
    <div :style="'height: '+windowHeight+'px;'" class="flex align-center justify-between" style="background-color: #0086b3;">
        <!--左面背景-->
        <div class="flex">
            <!--20200709没有弄懂图片缩放原理-->
            <img src="../../../assets/img/6135226.jpg" :style="'height: '+windowHeight+'px;'" width="1440">
        </div>

        <!--右面登陆-->
        <div class="flex flex-column" style="width: 480px;height: 100%;background-color: #FFFFFF;">
            <div class="flex flex-column"  style="margin-top: 50px;margin-bottom: 50px;margin-left: 90px;">
                <div class="flex flex-column justify-center">
                    <span style="font-size: 25px;color:#003A81;font-family: Algerian;">九 州 缘 起</span>
                    <span style="font-size: 15px;color:#003A81;font-family: Algerian;">精彩生活 由你掌握</span>
                </div>
            </div>
            <!--登陆注册-->
            <div class="flex flex-column" style="height: 720px;margin-top: 80px;margin-bottom: 80px;
        margin-left: 90px;margin-right: 90px;">
                <div class="flex">
                    <span style="color: #262626;font-size: 30px;font-family: Algerian;">Login</span>
                </div>
                <div style="margin-top: 20px;">
                    <input placeholder="请输入用户编码" style="width: 300px;height: 35px;" v-model="code"></input>
                </div>
                <div style="margin-top: 20px;">
                    <input placeholder="请输入密码" style="width: 300px;height: 35px;" v-model="password"></input>
                </div>
                <div class="flex align-center justify-center mt-2">
                    <span @click="toRegister">注册账号</span>

                    <span style="margin-left: 20px;margin-right: 20px;">|</span>
                    <!--密码登录-->
                    <span>忘记密码</span>
                </div>
                <div style="margin-top: 20px;">
                    <button style="width: 300px;height: 35px;" @click="login">验 证 登 录</button>
                </div>
                <div style="margin-top: 20px;" class="flex align-center justify-center">
                    <span>登录即代表你同意用户协议和隐私协议</span>
                </div>
                <div v-if="errorCode!=''" class="flex align-center justify-center">
                    <span style="color: red;font-size: 20px;">{{errorMsg}}</span>
                </div>
                <!--<div class="flex flex-column">-->
                <!--<div>-->
                <!--<span>AAABBBCCC@163.com</span>-->
                <!--</div>-->
                <!--<div>-->
                <!--<span>+86-XXX-XXXXXXXX</span>-->
                <!--</div>-->
                <!--<div>-->
                <!--<span>©2020-07 Author QQxiaodi. All rights reserved.</span>-->
                <!--</div>-->
                <!--<div>-->
                <!--<span></span>-->
                <!--</div>-->

                <!--</div>-->
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                code:'',
                password:'',
                errorCode:'',
                errorMsg:'',
                note: {
                    backgroundImage: "url(" + require("../../../assets/img/login-bg1.jpg") + ")",
                    backgroundSize: "100%",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "center center"
                },
                windowHeight:0
            }
        },
        mounted:function(){
            this.windowHeight = document.documentElement.clientHeight;
            // this.windowHeight = window.innerHeight;
            // console.log(this.windowHeight);


        },
        methods: {
            login() {
                // 假设登陆成功，则跳转到 home 组件
                // this.$router.push({name:'Home', query:{id: 3}});
                // this.$router.replace('/home');
                // this.$http.post('/sevenchat/api/user/v1/login',{'code':this.code, 'password':this.password})
                //   .then((response)=>{
                //     console.log(response.body);
                //     localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)
                //     this.$router.push({name:'msg'});
                //   },(response)=>{
                //     console.error(response.body);
                //   });
                this.$axios.post('/sevenchat/api/user/v1/login',{'code':this.code, 'password':this.password,'userType':1})
                    .then((res)=>{
                        this.errorCode='';
                        this.errorMsg = '';
                        console.log(res.data);

                        // this.$router.push({name:'login'});
                        if(res.data.code=='10000'){
                            localStorage.setItem('accessToken', res.data.data.token);
                            localStorage.setItem('userId',  res.data.data.id);
                            localStorage.setItem('userName', res.data.data.code);
                            localStorage.setItem('nickName', res.data.data.nickname);
                            localStorage.setItem('userLevel', res.data.data.userType);
                            this.$router.push({name:'msg',
                                params:{
                                    userId:res.data.data.id,
                                    userName:res.data.data.code,
                                    nickName:res.data.data.nickname,
                                    userLevel:res.data.data.userType
                                }});
                        }else{
                            this.errorCode=res.data.code;
                            this.errorMsg = res.data.message;
                        }
                    })
                    .catch((err)=>{
                        console.error(err);
                    });

            },
            toRegister(){
                this.$router.push({name:'register'});
            }
        }
    }
</script>

<style scoped>
    .login-bg-imgstyle{
        max-width:1900px;
        /*width:expression(this.width > 1900 ? "1900px" : this.width);*/
    }

</style>
